import React, { useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import {
  Select,
  Button,
  Table,
  Input,
  message,
  TreeSelect,
  Modal,
  Tabs,
  Popover,
  Image,
} from "antd";
import { FormOutlined, CopyOutlined, SearchOutlined } from "@ant-design/icons";
import {
  text_check,
  post_axios,
  online_type,
  avm_type_list,
  show_img_url,
  key_find_obj,
} from "../../utils";
import TypeIconTemp from "../../modules/typeIconTemp";
import OnlineIconTemp from "../../modules/onlineIconTemp";
import ChooseWares from "../../modules/chooseWares";
import "./index.scss";

export default function AvmStatus(props) {
  const { t } = useTranslation();
  const { Option } = Select;
  const { TextArea } = Input;
  const [tableHeight, setTableHeight] = useState(0);
  const { actions, setSpinning } = props;
  let { menu_action, user_power_lang, username, user_grade } = actions;
  user_power_lang = JSON.parse(user_power_lang);

  // 国内国外判断
  const session_company = sessionStorage.getItem("company");
  let localStorage_company = JSON.parse(localStorage.getItem("choose_company"));
  const local_company_object =
    localStorage_company &&
    localStorage_company[username] &&
    localStorage_company[username]
      ? localStorage_company[username]
      : "";
  const mgBool = session_company === "mg";

  const [page, setPage] = useState(1);
  const [rows, setRows] = useState(20);
  const [total, setTotal] = useState(0);
  const [com_ids_par, setCom_ids_par] = useState([]);
  const [mch_ids_par, setMch_ids_par] = useState([]);
  const [project_ids_par, setProject_ids_par] = useState([]);
  const [online, setOnline] = useState("");
  const [avmType, setAvmType] = useState("");
  const [avm_s, setAvm_s] = useState("");
  const [avmID_s, setAvmID_s] = useState("");
  const [avm_manager_list, setAvm_manager_list] = useState([]);

  const getData = async (newPage, newRows) => {
    let upMsg = {
      page: newPage ? newPage : page,
      rows: newRows ? newRows : rows,
      company_id: local_company_object.id,
      company: local_company_object.company,
      online: online,
      avm_s: avm_s,
      avmID_s: avmID_s,
      avmType: avmType,
      com_ids_par: JSON.parse(JSON.stringify(com_ids_par)),
      mch_ids_par: JSON.parse(JSON.stringify(mch_ids_par)),
      project_ids_par: JSON.parse(JSON.stringify(project_ids_par)),
    };
    setSpinning(true);
    let res = await post_axios("avm_status", "m_query", upMsg);
    setSpinning(false);
    if (!res) return;
    setAvm_manager_list(res.data_rows.rows);
    setTotal(res.data_rows.total);
  };
  const columns = [
    {
      dataIndex: "idx",
      align: "center",
      width: 40,
      render: (_, record, index) => <>{index + 1}</>,
    },
    {
      title: t("assets.avm_new"),
      dataIndex: "avm",
      align: "center",
    },
    {
      title: t("assets.avmID"),
      dataIndex: "avmID",
      align: "center",
    },
    {
      title: t("market.avm_box_type"),
      align: "center",
      render: (_, record) => <TypeIconTemp avm_msg={record} />,
    },
    {
      title: t("market.lock_status"),
      align: "center",
      hidden: mgBool,
      render: (_, record) => (
        <>
          {record.vision_lock === 0 ? (
            <span> 门锁异常 </span>
          ) : (
            <span> 门锁正常 </span>
          )}
          /
          {record.vision_power === 0 ? (
            <span> 电源异常 </span>
          ) : (
            <span> 电源正常 </span>
          )}
        </>
      ),
    },
    {
      title: t("market.network"),
      align: "center",
      render: (_, record) => (
        <OnlineIconTemp
          avm_msg={record}
          local_company_object={local_company_object}
        />
      ),
    },
    {
      title: t("market.project"),
      dataIndex: "project",
      align: "center",
    },
    {
      title: t("market.point"),
      dataIndex: "point",
      align: "center",
    },
    {
      title: t("goods.commodity_warehouse"),
      dataIndex: "bar_lib_name",
      align: "center",
    },
    {
      title: t("market.online_time"),
      dataIndex: "onlineChangeTime",
      align: "center",
    },
  ];

  // 分页器
  const pageOnChange = async (page, pageSize) => {
    setPage(page);
    setRows(pageSize);
    initData(page, pageSize);
  };

  // 用户数据行点击
  const [clickRowKey, setClickRowKey] = useState("");
  const [clickRow, setclickRow] = useState({});

  const tableRowClick = (row) => {
    setClickRowKey(row.avm);
    setclickRow(row);
    setBar_lib(row.bar_lib);
  };

  const search_data = () => {
    setPage(1);
    initData(1);
  };

  const initData = (page, rows) => {
    setClickRowKey("");
    setclickRow([]);
    getData(page, rows);
  };

  // 复制货道
  const [copy_road_show, setCopy_road_show] = useState(false);
  const [avm_old, setAvm_old] = useState("");
  const [avm_new, setAvm_new] = useState("");
  const copy_road = async () => {
    setAvm_old("");
    setAvm_new("");
    setCopy_road_show(true);
  };

  const copy_road_confirm = async () => {
    let upMsg = {
      avm_old: avm_old,
      avm_new: avm_new,
      company_id: local_company_object.id,
      company: local_company_object.company,
    };
    setSpinning(true);
    let res = await post_axios("avm_status", "m_copy", upMsg);
    setSpinning(false);
    if (!res) return;
    message.success({
      content: t("common.success"),
    });
    setCopy_road_show(false);
  };

  const [edit_avm_list, setEdit_avm_list] = useState([]);

  const road_tab_change = (key) => {
    console.log(key);
    const showArr = edit_avm_list.filter((item) => item.box_type_id === key);
    road_tab_Click(showArr);
  };

  // 配置货道
  const [edit_road_show, setEdit_road_show] = useState(false);
  const [road_tab_msg, setRoad_tab_msg] = useState("");
  const [tab_show_obj, setTab_show_obj] = useState({});
  const set_road_func = async () => {
    if (clickRowKey === "") {
      message.warning({
        content: t("assets.select_a_device"),
      });
      return;
    }
    //获取货柜
    let upMsg = {
      avm: clickRowKey,
      company_id: local_company_object.id,
      company: local_company_object.company,
      op_type: "box",
    };
    setSpinning(true);
    let res = await post_axios("avm_status", "m_aisle_query", upMsg);
    setSpinning(false);
    if (!res) return;
    let rows = res.data_rows.rows.map((item) => {
      return {
        ...item,
        label: `${item.box_name}(${item.box_sort_no})`,
        key: item.box_type_id,
      };
    });
    setEdit_avm_list(rows);
    if (rows === 0) {
      // 数量为0就中止并提示
      message.warning({
        content: t("assets.set_box_first"),
      });
      return;
    }
    setRoad_tab_msg(rows[0].box_type_id);
    await road_tab_Click(rows);
    setEdit_road_show(true);
  };
  const [edit_avm_road_arr, setEdit_avm_road_arr] = useState([]);
  const road_tab_Click = async (rows) => {
    const showObj = rows[0];
    setTab_show_obj(showObj);
    let { x_nu, y_nu } = showObj;
    //生成空的数据
    const newArr = [];
    for (let i = 1; i <= y_nu; i++) {
      for (let j = 1; j <= x_nu; j++) {
        newArr.push({
          x_no: i,
          y_no: j,
          vm_box_no: "",
          vm_aisle_no: "",
          vm_aisle_label: "",
          box_assets_no: "",
          ele_1: "",
          ele_2: "",
        });
      }
    }
    setEdit_avm_road_arr(newArr);
    await get_avm_road_data(showObj, newArr);
  };

  const [road_list, setRoad_list] = useState([]);
  const get_avm_road_data = async (showObj, newBlankArr) => {
    console.log(showObj);
    let upMsg = {
      avm: clickRowKey,
      company_id: local_company_object.id,
      company: local_company_object.company,
      op_type: "aisle",
      box_type_id: showObj ? showObj.box_type_id : road_tab_msg,
      box_assets_no: showObj
        ? showObj.box_assets_no
        : tab_show_obj.box_assets_no,
      bar_lib: clickRow.bar_lib,
    };
    setSpinning(true);
    let res = await post_axios("avm_status", "m_aisle_query", upMsg);
    setSpinning(false);
    if (!res) return;
    const originRows = res.data_rows.rows;
    setRoad_list(originRows);
    const blankArr = newBlankArr ? newBlankArr : edit_avm_road_arr;
    originRows.forEach((item) => {
      item["price"] = item["price"] ? item["price"] / 100 : 0;
      let idx = (item.x_no - 1) * showObj.x_nu + item.y_no - 1;
      let idx_obj = Object.assign(item, {
        box_assets_no: showObj
          ? showObj.box_assets_no
          : tab_show_obj.box_assets_no,
        ele_1: item.ele_1 ? item.ele_1 : "",
        ele_2: item.ele_2 ? item.ele_2 : "",
        pic: show_img_url(item, local_company_object.company),
      });
      blankArr[idx] = idx_obj;
    });
    setEdit_avm_road_arr(blankArr);
  };

  const [choose_goods_show, setChoose_goods_show] = useState(false);
  const [kind_page, setKind_page] = useState(1);
  const [kind_rows, setKind_rows] = useState(20);
  const [kind_total, setKind_total] = useState(0);
  const [bar_lib, setBar_lib] = useState("");
  const [name_search, setName_search] = useState("");
  const [goods_list, setGoods_list] = useState([]);
  // 获取商品库列表
  const get_goods_data = async (newPage, newRows) => {
    let upMsg = {
      page: newPage ? newPage : kind_page,
      rows: newRows ? newRows : kind_rows,
      company_id: local_company_object.id,
      company: local_company_object.company,
      bar_lib: bar_lib,
      name_search: name_search,
      barcode_search: "",
    };
    let res = await post_axios("goods_manager", "m_query", upMsg);
    if (!res) return;
    const newArr = res.data_rows.rows.map((item) => {
      item["pic"] = show_img_url(item, local_company_object.company);
      return item;
    });
    setGoods_list(newArr);
    setKind_total(res.data_rows.total);
  };

  // 一键补满
  const one_click_fill = async () => {
    console.log(tab_show_obj);
    let { box_assets_no, vm_box } = tab_show_obj;

    let upMsg = {
      box_assets_no,
      vm_box_no: vm_box,
      vm_aisle_no: "ALL",
      stock: "container",
      avm: clickRowKey,
      company_id: local_company_object.id,
      company: local_company_object.company,
    };
    let res = await post_axios("avm_status", "m_aisle_stock", upMsg);
    if (!res) return;
    //push_confirm_bool为是否点击了确认
    // 点击确认按钮代表提交更改之后进行同步并关闭
    setTimeout(() => {
      get_avm_road_data(tab_show_obj);
    }, 250);
  };

  // 货道配置推送
  const [push_confirm_bool, setPush_confirm_bool] = useState(false);
  const edit_road_confirm = async () => {
    setPush_confirm_bool(true);
    setSpinning(true);
    setTimeout(() => {
      avm_aisle_push();
    }, 1000);
  };
  const avm_aisle_push = async () => {
    let upMsg = {
      avm: clickRowKey,
      company_id: local_company_object.id,
      company: local_company_object.company,
    };
    let res = await post_axios("avm_status", "m_aisle_push", upMsg);
    setSpinning(false);
    if (!res) return;
    setEdit_road_show(false);
    setPush_confirm_bool(false);
  };

  // 配置货道商品
  const [click_set_goods_item, setClick_set_goods_item] = useState();
  const set_goods_func = async (item) => {
    if (menu_action.indexOf("m_aisle_price") == -1) return;
    setClick_set_goods_item(item);
    setChoose_goods_show(true);
  };
  // 点击选择商品
  const choose_goods_btn_func = async (value) => {
    let upMsg = Object.assign(click_set_goods_item, value);
    await set_road_goods_msg(upMsg, "m_aisle_barcode");
    setTimeout(() => {
      get_avm_road_data(tab_show_obj);
    }, 300);
    setChoose_goods_show(false);
  };

  // 上下架
  const radio_change = (item) => {
    item = JSON.parse(JSON.stringify(item));
    console.log(item);
    item.shelf = item.shelf === "ON" ? "OFF" : "ON";
    if (item.shelf === "OFF") {
      // 下架
      set_road_shelf(item, "m_aisle_off_shelf");
    } else {
      //上架
      if (item.barcode === "") {
        // 未设置商品，需要先设置商品
        message.warning({
          content: t("operate.set_goods_first"),
        });
        return;
      }
      if (item.price === "") {
        // 未设置商品，需要先设置价格
        message.warning({
          content: t("operate.set_price_first"),
        });
        return;
      }
      set_road_shelf(item, "m_aisle_on_shelf");
    }
  };
  const set_road_shelf = async (upMsg, action) => {
    upMsg["price"] = upMsg.price * 100;
    upMsg = Object.assign(upMsg, {
      avm: clickRowKey,
      company_id: local_company_object.id,
      company: local_company_object.company,
    });
    let res = await post_axios("avm_status", action, upMsg);
    if (!res) return;
    setTimeout(() => {
      get_avm_road_data(tab_show_obj);
    }, 250);
  };
  let priceTimer = null;
  const price_input_change = (value, item) => {
    if (value === "" || value === 0) {
      // 未设置商品，需要先设置价格
      message.warning({
        content: t("operate.set_price_first"),
      });
      clearTimeout(priceTimer);
      return;
    }
    if (priceTimer) {
      clearTimeout(priceTimer);
    }
    priceTimer = setTimeout(() => {
      let upMsg = Object.assign(JSON.parse(JSON.stringify(item)), {
        price: value * 10 * 10,
      });
      set_road_goods_msg(upMsg, "m_aisle_price");
    }, 1000);
  };
  let containerTimer = null;
  const container_input_change = (value, item) => {
    if (value === "" || value === 0) {
      // 未设置容量，需要先设置价格
      message.warning({
        content: t("operate.set_capacity_first"),
      });
      clearTimeout(containerTimer);
      return;
    }
    if (containerTimer) {
      clearTimeout(containerTimer);
    }
    containerTimer = setTimeout(() => {
      let upMsg = Object.assign(JSON.parse(JSON.stringify(item)), {
        container: Number(value),
      });
      set_road_goods_msg(upMsg, "m_aisle_container");
    }, 1000);
  };
  let stockTimer = null;
  const stock_input_change = (value, item) => {
    if (value === "" || value === 0) {
      // 未设置余量，需要先设置价格
      message.warning({
        content: t("operate.set_allowance_first"),
      });
      clearTimeout(stockTimer);
      return;
    }
    if (stockTimer) {
      clearTimeout(stockTimer);
    }
    stockTimer = setTimeout(() => {
      let upMsg = Object.assign(JSON.parse(JSON.stringify(item)), {
        stock: Number(value),
      });
      set_road_goods_msg(upMsg, "m_aisle_stock");
    }, 1000);
  };

  const set_road_goods_msg = async (upMsg, action) => {
    upMsg = Object.assign(upMsg, {
      avm: clickRowKey,
      company_id: local_company_object.id,
      company: local_company_object.company,
    });
    let res = await post_axios("avm_status", action, upMsg);
    if (!!res) return;
    //push_confirm_bool为是否点击了确认
    // 点击确认按钮代表提交更改之后进行同步并关闭
    setTimeout(() => {
      get_avm_road_data(tab_show_obj);
    }, 250);
  };
  // 获取组织列表
  const [com_list, setCom_list] = useState([]);
  const get_com_data = async () => {
    let upMsg = {
      company_id: local_company_object.id,
      company: local_company_object.company,
      op_type: "list_com_id",
    };
    let res = await post_axios("admin_oneself", "m_query", upMsg);
    if (!res) return;
    setCom_list(res.data_rows.rows);
  };

  // 筛选_获取商户列表
  const [mch_page, setMch_page] = useState(1);
  const [mch_list, setMch_list] = useState([]);
  const get_mch_data = async (newPage) => {
    let upMsg = {
      page: newPage ? newPage : mch_page,
      rows: 20,
      company_id: local_company_object.id,
      company: local_company_object.company,
      op_type: "list_mch",
    };
    let res = await post_axios("admin_oneself", "m_query", upMsg);
    if (!res) return;
    const receiveRows = res.data_rows.rows;
    setMch_list([...mch_list, ...receiveRows]);
  };
  // 商户筛选框-分页
  const mch_next_page = () => {
    setMch_page(mch_page + 1);
    get_mch_data(mch_page + 1);
  };

  // 筛选_获取项目列表
  const [project_page, setProject_page] = useState(1);
  const [project_rows, setProject_rows] = useState(20);
  const [project_list, setProject_list] = useState([]);
  const get_project_data = async (newPage) => {
    let upMsg = {
      page: newPage ? newPage : project_page,
      rows: project_rows,
      company_id: local_company_object.id,
      company: local_company_object.company,
      op_type: "list_project",
    };
    let res = await post_axios("admin_oneself", "m_query", upMsg);
    if (!res) return;
    setProject_list(res.data_rows.rows);
  };
  const project_next_page = () => {
    setProject_page(project_page + 1);
    setProject_ids_par([]);
    get_project_data(project_page + 1);
  };
  // 获取分库
  const [goods_kind_list, setGoods_kind_list] = useState([]);
  const get_goods_kind = async () => {
    let upMsg = {
      company_id: local_company_object.id,
      company: local_company_object.company,
      op_type: "list_goods_kind",
    };
    let res = await post_axios("admin_oneself", "m_query", upMsg);
    if (!res) return;
    setGoods_kind_list(res.data_rows.rows);
  };
  useEffect(() => {
    // 挂载后或者更新后的操作
    getData().then(() => {
      const tabBoxHeight =
        document.getElementsByClassName("avm_status")[0].scrollHeight;
      const tableHeight = tabBoxHeight - 96 - 110;
      setTableHeight(tableHeight);
    });
    if (user_grade < 70) {
      get_com_data();
    }
    get_mch_data();
    get_project_data();
    get_goods_kind();
  }, []);
  return (
    <>
      <div className="avm_status modules">
        <div className="screen_ipt">
          {user_grade < 70 ? (
            <div className="ipt_box ipt_box_long">
              <div className="ipt_box_title">{t("market.organization")}</div>
              <TreeSelect
                value={com_ids_par}
                treeData={com_list}
                allowClear={true}
                size="small"
                multiple
                treeCheckStrictly={true}
                fieldNames={{
                  label: "com",
                  value: "com_id",
                  children: "children",
                }}
                placeholder=" "
                treeCheckable={true}
                onChange={(newValue) => setCom_ids_par(newValue)}
              />
            </div>
          ) : (
            ""
          )}
          <div className="ipt_box ipt_box_long">
            <div className="ipt_box_title">{t("market.mch_name")}</div>
            <Select
              mode="multiple"
              size="small"
              placeholder=" "
              allowClear={true}
              value={mch_ids_par}
              options={mch_list}
              fieldNames={{
                label: "mch",
                value: "mch_id",
              }}
              onChange={(value) => setMch_ids_par(value)}
              onPopupScroll={(event) => {
                if (mch_list.length < mch_page * 20) {
                  console.log("没有更多商户的筛选数据了");
                  return;
                }
                const target = event.target;
                const residueHeight =
                  target.scrollHeight - target.scrollTop - target.clientHeight;
                if (residueHeight <= 50) {
                  mch_next_page();
                }
              }}
              optionFilterProp="mch"
            ></Select>
          </div>

          <div className="ipt_box ipt_box_long">
            <div className="ipt_box_title">{t("market.project")}</div>
            <Select
              mode="multiple"
              size="small"
              placeholder=" "
              allowClear={true}
              value={project_ids_par}
              options={project_list}
              fieldNames={{
                label: "project",
                value: "project_id",
              }}
              onChange={(value) => setProject_ids_par(value)}
              onPopupScroll={(event) => {
                if (project_list.length < project_page * 20) {
                  console.log("没有更多项目的筛选数据了");
                  return;
                }
                const target = event.target;
                const residueHeight =
                  target.scrollHeight - target.scrollTop - target.clientHeight;
                if (residueHeight <= 50) {
                  project_next_page();
                }
              }}
              optionFilterProp="project"
            ></Select>
          </div>
          <div className="ipt_box ipt_box_long">
            <div className="ipt_box_title">{t("assets.avm_new")}</div>
            <Input
              placeholder=" "
              value={avm_s}
              size="small"
              allowClear={true}
              onChange={(e) => setAvm_s(e.target.value)}
            />
          </div>
          <div className="ipt_box ipt_box_long">
            <div className="ipt_box_title">{t("assets.avmID")}</div>
            <Input
              placeholder=" "
              value={avmID_s}
              size="small"
              allowClear={true}
              onChange={(e) => setAvmID_s(e.target.value)}
            />
          </div>
          <div className="ipt_box ipt_box_long">
            <div className="ipt_box_title">{t("assets.network")}</div>
            <Select
              size="small"
              placeholder=" "
              allowClear={true}
              value={online}
              onChange={(value) => setOnline(value)}
            >
              {Object.keys(online_type).map((key) => {
                return (
                  <Option value={key} key={key}>
                    {text_check(online_type[key])}
                  </Option>
                );
              })}
            </Select>
          </div>
          {session_company !== "mg" ? (
            <div className="ipt_box ipt_box_long">
              <div className="ipt_box_title">{t("assets.avm_type")}</div>
              <Select
                size="small"
                placeholder=" "
                allowClear={true}
                value={avmType}
                onChange={(value) => setAvmType(value)}
              >
                {Object.keys(avm_type_list).map((key) => {
                  return (
                    <Option value={key} key={key}>
                      {text_check(avm_type_list[key])}
                    </Option>
                  );
                })}
              </Select>
            </div>
          ) : (
            ""
          )}
        </div>
        <div className="screen_btn">
          <div className="btn_box">
            {/* 配置货道 */}
            {menu_action.indexOf("m_aisle_query") > -1 ? (
              <Button
                size="small"
                type="text"
                icon={<FormOutlined style={{ color: "#1677FF" }} />}
                onClick={set_road_func}
              >
                {text_check(user_power_lang["m_aisle_query"])}
              </Button>
            ) : (
              ""
            )}
            {/* 复制货道 */}
            {menu_action.indexOf("m_copy") > -1 ? (
              <Button
                size="small"
                type="text"
                icon={<CopyOutlined style={{ color: "#1677FF" }} />}
                onClick={copy_road}
              >
                {text_check(user_power_lang["m_copy"])}
              </Button>
            ) : (
              ""
            )}

            {/* 查询 */}
            {menu_action.indexOf("m_query") > -1 ? (
              <Button
                size="small"
                type="text"
                icon={<SearchOutlined style={{ color: "#1677FF" }} />}
                onClick={search_data}
              >
                {text_check(user_power_lang["m_query"])}
              </Button>
            ) : (
              ""
            )}
          </div>
        </div>
        <div className="table_box">
          <div
            className="page-table"
            style={{
              width: "100vw",
            }}
          >
            <Table
              dataSource={avm_manager_list}
              size="small"
              bordered
              columns={columns}
              rowKey="avm"
              virtual
              scroll={{
                y: tableHeight,
              }}
              onRow={(record) => {
                return {
                  onClick: () => tableRowClick(record), // 点击行
                };
              }}
              rowClassName={(record, index) => {
                if (record.avm === clickRowKey) {
                  return "row_clicked_style";
                }
              }}
              rowHoverable={false}
              pagination={{
                defaultCurrent: page,
                defaultPageSize: rows,
                size: "small",
                current: page,
                total: total,
                responsive: true,
                showTotal: (total) =>
                  text_check({
                    msg_cn: `共 ${total} 条`,
                    msg_en: `Total ${total} items`,
                  }),
                onChange: pageOnChange,
              }}
            />
          </div>
        </div>
      </div>

      <Modal
        title={t("operate.copy_road")}
        open={copy_road_show}
        onOk={copy_road_confirm}
        onCancel={() => setCopy_road_show(false)}
        classNames={{ body: "edit_dialog_body" }}
        maskClosable={false}
        destroyOnClose={true}
      >
        <div className="dialog_ipt_box">
          <div className="ipt_box_title">{t("operate.target_machine")}</div>
          <Input
            placeholder=" "
            value={avm_old}
            onChange={(e) => setAvm_old(e.target.value)}
          />
        </div>
        <div className="dialog_ipt_box">
          <div className="ipt_box_title">{t("operate.receive_machine")}</div>
          <TextArea
            placeholder=" "
            value={avm_new}
            onChange={(e) => setAvm_new(e.target.value)}
          />
        </div>
      </Modal>

      <Modal
        title={t("assets.container_configuration")}
        open={edit_road_show}
        onCancel={() => setEdit_road_show(false)}
        classNames={{
          body: "edit_dialog_body avm_status_dialog",
          wrapper: "noFooterFullscreen",
        }}
        maskClosable={false}
        destroyOnClose={true}
        footer={null}
      >
        {edit_avm_list.length > 0 ? (
          <>
            <Tabs
              defaultActiveKey={edit_avm_list[0]["box_type_id"]}
              items={edit_avm_list}
              onChange={road_tab_change}
            />

            <div
              className="edit_road_content"
              style={{
                width: tab_show_obj.x_nu * 140 + 30 + "px",
                maxWidth: "100%",
                height: tableHeight + 80 + "px",
                overflow: "auto",
              }}
            >
              {edit_avm_road_arr.map((item) => {
                return (
                  <div
                    key={item.x_no + "_" + item.y_no}
                    className={[
                      item.vm_box_no !== "" &&
                      item.vm_aisle_no !== "" &&
                      item.vm_aisle_label !== ""
                        ? "ipt_success_style edit_road_box"
                        : "ipt_success_style",
                    ]}
                    style={{
                      backgroundImage: `url(${item.pic})`,
                    }}
                  >
                    {item.vm_box_no !== "" &&
                    item.vm_aisle_no !== "" &&
                    item.vm_aisle_label !== "" ? (
                      <div className="msg_upper_strata_box">
                        <div className="ipt_box_xytitle">
                          <span>
                            {" "}
                            x:{item.x_no},y:{item.y_no}
                          </span>
                          <span>
                            {item.vm_box_no}/{item.vm_aisle_no}/
                            {item.vm_aisle_label}
                          </span>
                        </div>
                        <div className="edit_road_ipt">
                          <div className="edit_road_ipt_title">
                            {t("operate.goods_name")}
                          </div>
                          <div
                            className="edit_road_ipt_content"
                            onClick={() => set_goods_func(item)}
                            style={{ cursor: "pointer" }}
                          >
                            <Popover
                              placement="rightTop"
                              content={
                                <Image
                                  src={item.pic}
                                  fit="contain"
                                  preview={false}
                                />
                              }
                            >
                              {item.name}
                            </Popover>
                          </div>
                        </div>
                        <div className="edit_road_ipt">
                          <div className="edit_road_ipt_title">
                            {t("operate.goods_barcode")}
                          </div>
                          <div className="edit_road_ipt_content">
                            {item.barcode}
                          </div>
                        </div>
                        <div className="edit_road_ipt">
                          <div
                            className="edit_road_ipt_title"
                            disabled={
                              menu_action.indexOf("m_aisle_container") == -1
                            }
                          >
                            {t("operate.capacity")}
                          </div>

                          <div className="edit_road_ipt_content">
                            <Input
                              defaultValue={item.container}
                              size="small"
                              onChange={(e) =>
                                container_input_change(e.target.value, item)
                              }
                            />
                          </div>
                        </div>
                        <div className="edit_road_ipt">
                          <div
                            className="edit_road_ipt_title"
                            disabled={
                              menu_action.indexOf("m_aisle_stock") == -1
                            }
                          >
                            {t("operate.allowance")}
                          </div>
                          <div className="edit_road_ipt_content">
                            <Input
                              defaultValue={item.stock}
                              size="small"
                              onChange={(e) =>
                                stock_input_change(e.target.value, item)
                              }
                            />
                          </div>
                        </div>
                        <div className="edit_road_ipt">
                          <div
                            className="edit_road_ipt_title"
                            disabled={
                              menu_action.indexOf("m_aisle_price") == -1
                            }
                          >
                            {t("operate.price")}
                          </div>
                          <div className="edit_road_ipt_content">
                            <Input
                              defaultValue={item.price}
                              size="small"
                              onChange={(e) =>
                                price_input_change(e.target.value, item)
                              }
                            />
                          </div>
                        </div>
                        <div
                          onClick={() => radio_change(item)}
                          className={[
                            item.shelf === "ON"
                              ? "put_on_box put_on_success"
                              : "put_on_box",
                          ]}
                        >
                          {item.shelf === "ON" ? (
                            <span>{t("operate.put_on")}</span>
                          ) : (
                            <span>{t("operate.put_off")}</span>
                          )}
                        </div>
                        <div className="status_line">
                          {item.sell_out == 1 ? (
                            <span className="status_icon_word">
                              {t("operate.sale_empty")}
                            </span>
                          ) : (
                            ""
                          )}

                          {item.forbidden == "238" ? (
                            <span className="status_icon_word">
                              {t("operate.disable")}
                            </span>
                          ) : (
                            ""
                          )}

                          {item.fault == "1" ? (
                            <span className="status_icon_word">
                              {t("operate.fault")}
                            </span>
                          ) : (
                            ""
                          )}
                        </div>
                      </div>
                    ) : (
                      <>
                        <div className="edit_road_ipt"></div>
                        <div className="edit_road_ipt"></div>
                        <div className="edit_road_ipt"></div>
                        <div className="edit_road_ipt"></div>
                        <div className="edit_road_ipt"></div>
                        <div className="status_line"></div>
                        <div className="status_line"></div>
                      </>
                    )}
                  </div>
                );
              })}
            </div>

            <div
              style={{
                width: " 100%",
                display: "flex",
                justifyContent: "flex-end",
                padding: "20px",
              }}
            >
              {/* 一键补满  */}
              {menu_action.indexOf("m_one_click_fill") > -1 ? (
                <Button type="primary" onClick={one_click_fill}>
                  {text_check(user_power_lang["m_one_click_fill"])}
                </Button>
              ) : (
                ""
              )}
              <Button
                type="primary"
                style={{ marginLeft: "20px" }}
                onClick={edit_road_confirm}
              >
                {t("common.confirm")}
              </Button>
            </div>
          </>
        ) : (
          ""
        )}
      </Modal>
      {choose_goods_show ? (
        <ChooseWares
          local_company_object={local_company_object}
          tableHeight={tableHeight}
          setSpinning={setSpinning}
          choose_goods_show={choose_goods_show}
          setChoose_goods_show={setChoose_goods_show}
          choose_goods_btn_func={choose_goods_btn_func}
          bar_lib={bar_lib}
        />
      ) : (
        ""
      )}
    </>
  );
}
